作者在pure-admin-thin使用了vite-plugin-mock這個套件:
https://github.com/vbenjs/vite-plugin-mock#mockmethod

方便開發者在後端還沒有完成後端程式時，前端可以先寫假資料串接
實際用起來蠻方便的，重點是支援動態更新(不用 ctrl+c 中斷再重新跑起來)!

簡易範例

作者都先幫我們設定好了，直接使用:
首先找到 mock 資料夾，新增一個 test.ts

//\mock\test.ts
//引入 ts interface
import { MockMethod } from "vite-plugin-mock";

// 格式為陣列裡面一個物件就是一隻 API
export default [
  {
    url: "/config1",
    method: "get",
    response: obj => {
      return obj;
    }
  }
] as MockMethod[];

下指令 pnpm dev

這時候就可以開啟 postman 測試一下 API

這邊使用的範例是包含 query param + body 參數如下:

• GET
• http://localhost:8848/config1?name=ithome&id=1
• {"data":123}

成功拿到回傳了，裡面包含了 headers query body url

寫判斷來回傳

既然能吃到 body 和 query 我們就能寫一個簡易的判斷，套件也支援在前端寫 function 去動態回傳資料!

import { MockMethod } from "vite-plugin-mock";

export default [
  {
    url: "/config1",
    method: "get",
    //這邊做解構
    response: ({ body, query }) => {
      let res = {};
      if (query?.id === "1" && body?.data === 123) {
        res = { id: 1 };
      } else {
        res = {};
      }
      return res;
    }
  }
] as MockMethod[];

多支API

一個檔案當然可以寫多支 API
如下:

import { MockMethod } from "vite-plugin-mock";

export default [
  {
    url: "/config1",
    method: "get",
    response: () => {
      return 1;
    }
  },
  {
    url: "/config2",
    method: "post",
    response: () => {
      return 2;
    }
  }
] as MockMethod[];

postman 打2支 API ，可以正確拿到資料

?可以寫一支檔案支援多支API，用陣列包一堆物件

"坑"

url 和 method 相同時的優先度

如果寫到相同 url和method 經過測試v2.9.6會依照
1.VScode檔案名稱越前面優先度越高
2.該檔案陣列的 index，越小優先度越高

舉例:

//test.ts
export default [
  {
    url: "/config1",
    method: "get",
    response: () => {
      return 19;
    }
  },
  {
    url: "/config1",
    method: "get",
    response: () => {
      return 2;
    }
  }
] as MockMethod[];

//T.ts
export default [
  {
    url: "/config1",
    method: "get",
    response: () => {
      return 111;
    }
  },
  {
    url: "/config1",
    method: "get",
    response: () => {
      return 222;
    }
  }
] as MockMethod[];

打 API GET http://localhost:8848/config1
答案是: 111

以上就是"vite-plugin-mock"簡單介紹，讀者不坊試試看~